<%@ page import="java.sql.*" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生产过程管理系统</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/user.js"></script>
    <style>
        .right_information {
            width: 100%;
            display:flex;
            justify-content: center;
            border: 0;
            overflow: hidden;
        }

        .head_size{
            font-size: 20px;
        }
        .person {
            background-image: url(img/person.png);
            background-repeat: no-repeat;
            background-size: 25px 25px;
            background-position: 20% center;
            text-align: center;
            background-color: rgb(238, 238, 238);
            font-size: larger;
        }
        .material {
            background-image: url(img/material.png);
            background-repeat: no-repeat;
            background-size: 25px 25px;
            background-position: 20% center;
            text-align: center;
            background-color: rgb(238, 238, 238);
            font-size: larger;
        }
        .device {
            background-image: url(img/device.png);
            background-repeat: no-repeat;
            background-size: 25px 25px;
            background-position: 20% center;
            text-align: center;
            background-color: rgb(238, 238, 238);
            font-size: larger;
        }
        .product {
            background-image: url(img/product.png);
            background-repeat: no-repeat;
            background-size: 25px 25px;
            background-position: 20% center;
            text-align: center;
            background-color: rgb(238, 238, 238);
            font-size: larger;
        }
        .insert {
            background-image: url(img/insert.png);
            background-repeat: no-repeat;
            background-size: 20px 20px;
            background-position: 25% center;
            text-align: center;
        }
        .log {
            background-image: url(img/log.png);
            background-repeat: no-repeat;
            background-size: 20px 20px;
            background-position: 25% center;
            text-align: center;
        }
        .manage {
            background-image: url(img/manage.png);
            background-repeat: no-repeat;
            background-size: 20px 20px;
            background-position: 25% center;
            text-align: center;
        }
    </style>
</head>
<body>
<!-- 顶部栏 -->
<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a class="head_size" href="welcome.jsp" target="right_frame">
                    <img src="img/logo.png" alt="" width="25px" height="25px" class="d-inline-block align-text-top">
                    生产过程管理系统
                </a>
                </li>
                <li><a href="#">用户信息</a>
                </li>
                <li><a href="#">物料信息</a>
                </li>
                <li><a href="#">设备信息</a>
                </li>
                <li><a href="#">产品信息</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a>欢迎您,<%
                    if (session.getAttribute("user") != null) out.print(session.getAttribute("user"));%></a>
                </li>
                <li><a href="login.jsp">
                    <img src="img/exit.png" alt="" width="20" height="20" class="d-inline-block align-text-top">
                    安全退出
                </a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!-- 中部主体 -->
<div class="container-fluid">
    <div class="row">
        <!-- 左侧菜单 -->
        <div class="list-group col-sm-2" id="menulist">
            <a id="userMenu-title" href="#userMenu" class="list-group-item person" data-toggle="collapse"
               onclick="toggleMenu('userMenu')">
                用户信息
            </a>
            <div id="userMenu" class="collapse">
                <a href="PersonListServlet" class="list-group-item manage" target="right_frame">用户信息管理</a>
                <a href="PersonEditServlet" class="list-group-item insert" target="right_frame">用户信息添加</a>
                <a href="#" class="list-group-item log" target="">用户日志查看</a>
            </div>

            <a id="materialMenu-title" href="#materialMenu" class="list-group-item material" data-toggle="collapse"
               onclick="toggleMenu('materialMenu')">
                物料信息
            </a>
            <div id="materialMenu" class="collapse">
                <a href="MaterialListServlet" class="list-group-item manage" target="right_frame">物料信息管理</a>
                <a href="MaterialEditServlet" class="list-group-item insert" target="right_frame">物料信息添加</a>
                <a href="#" class="list-group-item log">物料日志查看</a>
            </div>

            <a id="deviceMenu-title" href="#deviceMenu" class="list-group-item device" data-toggle="collapse"
               onclick="toggleMenu('deviceMenu')">
                设备信息
            </a>
            <div id="deviceMenu" class="collapse">
                <a href="deviceList" class="list-group-item manage" target="right_frame">设备信息管理</a>
                <a href="deviceEdit?optype=add" class="list-group-item insert" target="right_frame">设备信息编辑</a>
                <a href="#" class="list-group-item log">设备日志查看</a>
            </div>

            <a id="productMenu-title" href="#productMenu" class="list-group-item product" data-toggle="collapse"
               onclick="toggleMenu('productMenu')">
                产品信息
            </a>
            <div id="productMenu" class="collapse">
                <a href="ProductListServlet" class="list-group-item manage"target="right_frame">产品信息管理</a>
                <a href="ProductEditServlet?type=add" class="list-group-item insert"target="right_frame">产品信息添加</a>
                <a href="#" class="list-group-item log">产品日志查看</a>
            </div>
        </div>
        <!-- 右侧信息显示 -->
        <div class="col-sm-10" id="right">
            <div class="row clearfix">
                <iframe id="bi_iframe" src="welcome.jsp" class="right_information" name="right_frame" onload="adjustIframe()"></iframe>
            </div>
        </div>
    </div>
</div>

<!-- 底部页脚部分 -->
<div class="footer">
    <p class="text-center">
        2024 &copy;
    </p>
</div>
</body>
<script>
    /*
           * 对选中的标签激活active状态，对先前处于active状态但之后未被选中的标签取消active
           * （实现左侧菜单中的标签点击后变色的效果）
           */
    $(document).ready(function () {
        $('#menulist> a').click(function (e) {
            //e.preventDefault();    加上这句则导航的<a>标签会失效
            $('#menulist> a').removeClass('active');
            $(this).addClass('active');
        });
    });


    function goPage(url) {
        window.location.href = url;
    }

    $(function () {
        //时间控制每隔200毫秒检查当前页面高度以及滚动高度，测试多遍，cpu占用极少，不明显影响程序运行速度
        window.setInterval("reinitIframe()", 200);
    })

    function adjustIframe(){
        var iframe = document.getElementById("bi_iframe");
        try {
            //bHeight 和 dHeight 如果相等，用其一等于iframe.height 即可
            // var bHeight = iframe.contentWindow.document.body.scrollHeight;
            var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
            // var height = Math.max(bHeight, dHeight);
            console.log(dHeight)
            iframe.height = dHeight;
        } catch (ex) { }
    }

</script>
</html>